<template>
  <tbody>
    <tr v-for="(item, index) in List" :key="index">
      <td>
        <input type="checkbox" v-model="item.checked" />
      </td>
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
      <td>
        <button @click="down(item, index)">-</button>{{ item.num
        }}<button @click="up(item, index)">+</button>
      </td>
      <td>{{ item.num * item.price }}</td>
      <td><button @click="del(item, index)">删除</button></td>
    </tr>
  </tbody>
</template>

<script>
import bus from './bus'
export default {
  data() {
    return {
      count: 0,
    }
  },
  props: {
    List: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  created() {
    this.List.map((item) => {
      this.count += item.price
    })
    console.log(this.count)
    this.$nextTick(() => {
      bus.$emit('getCount', this.count)
    })
  },
  methods: {
    del(item, index) {
      this.count = this.count - item.price * item.num
      this.List.splice(index, 1)
      bus.$emit('getCount', this.count)
    },
    down(item, index) {
      if (item.num == 0) return
      this.count = this.count - item.price
      bus.$emit('getCount', this.count)
      if (this.List[index].num >= 1) {
        this.List[index].num -= 1
        this.$on()
      }
    },
    up(item, index) {
      this.count += item.price
      bus.$emit('getCount', this.count)
      this.List[index].num += 1
    },
  },
}
</script>
<style scoped></style>